﻿
@{
    ViewData["Title"] = "RoomsShow";
}

@using Model
@model List<RoomsModel>


<script src="~/js/axios.min.js"></script>
<script src="~/js/vue.min.js"></script>
<script src="~/js/bootstrap.js"></script>
<script src="~/js/qs.min.js"></script>
<script src="~/js/moment.js"></script>

<h3 style="margin-left:5px;color:cornflowerblue">客房列表</h3>
<br />
<br />
<div id="tm">
    <div>
        <input style="margin-left:5px;" type="text" v-model="queryModel.name" />
        <input type="button" value="查询" class="btn btn-info" v-on:click="queryRoom" />
        <input type="button" value="新增客房类型" class="btn btn-info" onclick="Aroom()" />
    </div>
    <table class="table table-bordered" style="text-align:center;">
        <tr class="change" style="background-color:aqua;">
            <th>编号</th>
            <th>客房名称</th>
            <th>客房类型</th>
            <th>客房价格</th>
            <th>客房类型状态</th>
            <th>客房电话</th>
            <th>操作</th>
        </tr>
        <tr class="change" v-for="(item,index) in r">
            <td>{{index+1}}</td>
            <td>{{item.rname}}</td>
            <td>{{item.rTname}}</td>
            <td><span style="color:red">￥{{item.rprice}}.00</span>元</td>
            <td>{{item.rstate==1?"未入住":"已入住"}}</td>
            <td>{{item.rtel}}</td>
            <td>
                <input type="button" v-on:click="DeleteRoom(item.rid)" value="删除" class="btn btn-danger" />
                <input type="button" onclick="Uroom()" class="btn  btn-info" value="修改" />
            </td>
        </tr>
    </table>
</div>
<script>
    new Vue({
        el: '#tm',
        data() {
            return {           
                    r: [],  
                    queryModel: {
                          name:"",
                   },
                aid: 0
            }
        },
        mounted: function () {       //页面加载成功的事件
            //设置请求路径
            axios
                .get("/Room/RoomsModels")
                .then(res => (this.r = res.data))
                .catch(function (error) {
                    console.log(error);
                });
        },
        methods: {
            //查询方法
            queryRoom: function () {
                axios
                    .get("/Room/RoomsModels", {
                        params: this.queryModel
                    })
                    .then(res => (this.r = res.data));
            },
            //删除方法
            DeleteRoom: function (rid) {        
                this.id = rid;
                axios
                    .get("/Room/DelRoom", {
                        params: {
                            aid: this.id
                        }
                    })
                    .then(function (i) {                      
                            if (i.data > 0) {
                                alert("删除成功!");
                                location.href = '/Room/RoomsShow'
                            }
                            else {
                                alert("删除失败");
                            }
                        }
                   );
            },
        }
    });    
    function Aroom() {
        location.href = '/Room/AddRoomview'
    }
    function Uroom() {
        location.href = '/Room/UptRoomview'
    }
</script>




